import React, { Component } from 'react';
import { Form, Input, Select, Button, Table, Tooltip } from 'antd';
import axios from '../../requests/axios'
import './index.scss'
import Jcymtc from './jcLayer'
const { Option } = Select;
const columns = [{
  title: 'id',
  dataIndex: 'id',
  align: 'center'    // 设置文本居中的属性
}, {
  title: '文章标题',
  dataIndex: 'title',
  align: 'center',
  ellipsis: { //带省略号
    showTitle: false,
  },
  render: (text, record) => (
    <Tooltip placement="topLeft" title={text}>
      {text}
    </Tooltip>
  ),
}, {
  title: '姓名',
  dataIndex: 'author',
  align: 'center'
}, {
  title: '点击次数',
  dataIndex: 'amount',
  align: 'center'
}, {
  title: '年龄',
  dataIndex: 'age',
  align: 'center'
}, {
  title: '时间',
  dataIndex: 'date',
  align: 'center'
}]
class jcym extends Component {
  constructor(props) {
    super(props);
    this.state = {
      type: true,
      param: {},
      data: [],
      paginationProps: {
        page: 1,
        onChange: (page) => this.dataInitialize(page),
        total: 60
      },
      loading: false,
      layerType: false,
      childrenParam: [],
      editStatus: false
    }
    this.formRef = React.createRef()
  }

  //组件挂载完毕 --用于数据请求
  componentDidMount() {
    //初始化form表单数据
    this.formRef.current.setFieldsValue({
      username: '',
      year: '',
    })
    this.dataInitialize()

    setTimeout(() => {
      this.setState({
        type: !this.state.type
      })
    }, 3000)
  }

  //组件将要卸载
  componentWillUnmount() { }

  render() {
    return (
      <div>
        <div>{this.exhibit()}</div>
        <Form ref={this.formRef} layout='inline'>
          <Form.Item className='my_fm_st' label="姓名" name="username">
            <Input />
          </Form.Item>
          <Form.Item className='my_fm_st' label="年度" name="year">
            <Select>
              <Option value="">全部</Option>
              <Option value="2020">2020</Option>
              <Option value="2021">2021</Option>
            </Select>
          </Form.Item>
          <Form.Item>
            <Button className='my_btn_st' type="primary" htmlType="submit" onClick={this.lookup}>查询 </Button>
            <Button className='my_btn_st' type="primary" htmlType="submit" onClick={this.newlyBuild}>新建 </Button>
            <Button className='my_btn_st' type="primary" htmlType="submit" disabled={this.state.childrenParam.length === 1 ? false : true} onClick={this.compiler}>编辑 </Button>
          </Form.Item>
        </Form>
        {/* <Table dataSource={dataSource} columns={columns} />; */}
        <Table
          className='my_tab_st'
          rowKey="id" //重新定义key值
          loading={this.loading}
          bordered
          scroll={{ y: 310 }}
          dataSource={this.state.data} //列表数据
          columns={columns} //列表规则设置
          pagination={this.state.paginationProps} //分页配置
          rowSelection={{ //多选
            type: 'checkbox',
            onChange: this.checkboxChange,
            // defaultSelectedRowKeys:['130000199307291181']  //默认选中
          }}
        />
        {this.state.layerType ? <Jcymtc {...{ childrenParam: this.state.childrenParam, editStatus: this.state.editStatus }} layerCallback={this.layerCallback}></Jcymtc> : ''}
      </div>
    );
  }

  dataInitialize = (page = 1) => {
    this.setState({
      loading: true
    })
    axios.post('/antd/api/v1/articleList', this.state.param).then(res => {
      this.setState({
        data: res.data.list,
        loading: false
      }, () => {
        console.log(res.data.list)
        console.log(this.state)
      })
    })

  }

  lookup = () => {
    this.formRef.current.validateFields().then(values => {
      this.setState({
        param: values
      })
    })
    this.dataInitialize()
  }
  newlyBuild = () => {
    this.setState({
      editStatus: false,
      layerType: true
    })
  }
  compiler = () => {
    this.setState({
      editStatus: true,
      layerType: true
    })
  }
  exhibit = () => {
    if (this.state.type) {
      return (
        <div style={{ color: 'blue' }}>测试显示</div>
      )
    } else {
      return (
        <div style={{ color: 'red' }}>测试隐藏</div>
      )
    }
  }
  layerCallback = (params) => {
    this.setState({
      layerType: false
    })
  }
  checkboxChange = (selectedRowKeys, selectedRows) => {
    this.setState({
      childrenParam: selectedRows
    })
    // console.log(selectedRowKeys,111111111)
    // console.log(selectedRows,222222222)
  }
}

export default jcym;